<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/js/haha.js"></script>
    <script src="/js/swiper-bundle.min.js"></script>
    <script src="/js/vue-awesome-swiper.js"></script>
    <!-- 引入Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <!-- 引入Swiper依赖 -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

    <title>商品详情</title>
    <style>
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type="number"] {
            border: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="min-h-screen bg-gray-50">
            <!-- 顶部信息栏 -->
            <div class="bg-white border-b">
                <div class="container mx-auto flex justify-between items-center h-10 text-sm">
                    <div class="flex items-center space-x-4">
                        <span>欢迎来到生鲜优选</span>
                        <a href="#" class="text-gray-600 hover:text-green-500">请登录</a>
                        <a href="#" class="text-green-500">免费注册</a>
                    </div>
                    <div class="flex items-center space-x-6">
                        <a href="#" class="flex items-center hover:text-green-500">
                            <i class="fas fa-user-circle mr-1"></i>
                            <span>个人中心</span>
                        </a>
                        <a href="#" class="flex items-center text-green-500">
                            <i class="fas fa-shopping-cart mr-1"></i>
                            <span>购物车</span>
                        </a>
                        <a href="#" class="flex items-center hover:text-green-500">
                            <i class="fas fa-clipboard-list mr-1"></i>
                            <span>我的订单</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Logo和搜索区 -->
            <div class="container mx-auto py-6">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="text-3xl font-bold text-green-600 flex items-center">
                            <i class="fas fa-leaf mr-2"></i>
                            <span>生鲜优选</span>
                        </div>
                    </div>
                    <div class="flex-1 max-w-2xl mx-12">
                        <div class="relative">
                            <input type="text" placeholder="搜索生鲜商品"
                                class="w-full h-11 pl-4 pr-12 border-2 border-green-500 rounded-lg focus:outline-none">
                            <button
                                class="absolute right-0 top-0 h-11 w-20 bg-green-500 text-white rounded-r-lg hover:bg-green-600">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center text-green-600">
                        <i class="fas fa-headset text-2xl mr-2"></i>
                        <span class="text-xl">400-888-8888</span>
                    </div>
                </div>
            </div>

            <!-- 面包屑导航 -->
            <div class="container mx-auto py-4">
                <div class="flex items-center text-sm text-gray-500">
                    <a href="#" class="hover:text-green-500">首页</a>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <a href="#" class="hover:text-green-500">新鲜蔬菜</a>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span class="text-gray-700">有机生菜</span>
                </div>
            </div>

            <!-- 商品详情区域 -->
            <div class="container mx-auto bg-white p-8 rounded-lg shadow-sm">
                <div class="flex gap-8">
                    <!-- 商品图片展示 -->
                    <div class="w-96">
                        <div class="aspect-square rounded-lg overflow-hidden border">
                            <img :src="mainImage" class="w-full h-full object-cover" />
                        </div>
                        <div class="grid grid-cols-5 gap-2 mt-4">
                            <div v-for="(img, index) in thumbnails" :key="index"
                                class="aspect-square rounded border cursor-pointer hover:border-green-500"
                                :class="{'border-green-500': currentImageIndex === index}"
                                @click="currentImageIndex = index">
                                <img :src="img" class="w-full h-full object-cover" />
                            </div>
                        </div>
                    </div>

                    <!-- 商品信息 -->
                    <div class="flex-1">
                        <h1 class="text-2xl font-medium text-gray-800">有机生菜 新鲜采摘 农场直供 无农药残留 500g/份</h1>
                        <div class="mt-6 bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-baseline">
                                <span class="text-sm text-gray-500">价格</span>
                                <span class="ml-4 text-2xl font-medium text-green-500">¥15.99</span>
                                <span class="ml-2 text-sm line-through text-gray-400">¥19.99</span>
                            </div>
                            <div class="mt-4 flex items-center">
                                <span class="text-sm text-gray-500">运费</span>
                                <span class="ml-4 text-gray-700">免运费</span>
                            </div>
                        </div>

                        <!-- 商品规格 -->
                        <div class="mt-6">
                            <div class="text-sm text-gray-500 mb-2">规格</div>
                            <div class="flex flex-wrap gap-3">
                                <button v-for="spec in ['500g/份', '1kg/份', '2kg/份']" :key="spec"
                                    class="px-4 py-2 border rounded-lg text-sm whitespace-nowrap"
                                    :class="selectedSpec === spec ? 'border-green-500 text-green-500' : 'border-gray-200'"
                                    @click="selectedSpec = spec">
                                    {{ spec }}
                                </button>
                            </div>
                        </div>

                        <!-- 购买数量 -->
                        <div class="mt-6">
                            <div class="text-sm text-gray-500 mb-2">数量</div>
                            <div class="flex items-center">
                                <button
                                    class="w-8 h-8 border rounded-l flex items-center justify-center hover:bg-gray-50"
                                    @click="quantity > 1 && quantity--">
                                    <i class="fas fa-minus text-gray-400"></i>
                                </button>
                                <input type="number" v-model="quantity"
                                    class="w-16 h-8 border-t border-b text-center focus:outline-none border-gray-200" />
                                <button
                                    class="w-8 h-8 border rounded-r flex items-center justify-center hover:bg-gray-50"
                                    @click="quantity++">
                                    <i class="fas fa-plus text-gray-400"></i>
                                </button>
                            </div>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="mt-8 flex gap-4">
                            <button
                                class="flex-1 h-12 bg-green-500 text-white rounded-lg hover:bg-green-600 !rounded-button whitespace-nowrap">
                                立即购买
                            </button>
                            <button
                                class="flex-1 h-12 border-2 border-green-500 text-green-500 rounded-lg hover:bg-green-50 !rounded-button whitespace-nowrap">
                                加入购物车
                            </button>
                        </div>

                        <!-- 服务承诺 -->
                        <div class="mt-8 flex items-center space-x-6 text-sm text-gray-500">
                            <div class="flex items-center">
                                <i class="fas fa-shield-alt text-green-500 mr-1"></i>
                                <span>正品保证</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-truck text-green-500 mr-1"></i>
                                <span>急速配送</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-undo text-green-500 mr-1"></i>
                                <span>7天无理由退换</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 商品详情 -->
                <div class="mt-8">
                    <div class="border-b">
                        <div class="flex">
                            <div class="px-8 py-4 text-green-500 border-b-2 border-green-500 font-medium">商品详情</div>
                            <div class="px-8 py-4 text-gray-500 cursor-pointer hover:text-green-500">商品评价</div>
                        </div>
                    </div>
                    <div class="py-8">
                        <div class="bg-gray-50 p-6 rounded-lg mb-6">
                            <h3 class="text-lg font-medium text-gray-800 mb-4">商品参数</h3>
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div class="flex">
                                    <span class="text-gray-500 w-24">商品名称：</span>
                                    <span class="text-gray-700">有机生菜</span>
                                </div>
                                <div class="flex">
                                    <span class="text-gray-500 w-24">产地：</span>
                                    <span class="text-gray-700">本地有机农场</span>
                                </div>
                                <div class="flex">
                                    <span class="text-gray-500 w-24">保质期：</span>
                                    <span class="text-gray-700">7天</span>
                                </div>
                                <div class="flex">
                                    <span class="text-gray-500 w-24">储存方式：</span>
                                    <span class="text-gray-700">0-4℃冷藏保存</span>
                                </div>
                            </div>
                        </div>
                        <div class="space-y-6">
                            <img v-for="(img, index) in detailImages" :key="index" :src="img"
                                class="w-full rounded-lg" />
                        </div>
                    </div>
                </div>
            </div>

            <!-- 服务特点 -->
            <div class="bg-white py-12 mt-8">
                <div class="container mx-auto">
                    <div class="grid grid-cols-4 gap-8">
                        <div v-for="(feature, index) in features" :key="index" class="flex items-center justify-center">
                            <i :class="feature.icon" class="text-3xl text-green-500 mr-4"></i>
                            <div>
                                <h4 class="font-medium text-gray-800">{{ feature.title }}</h4>
                                <p class="text-gray-500 text-sm mt-1">{{ feature.desc }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 页脚导航 -->
            <footer class="bg-gray-100 pt-12 pb-8 mt-12">
                <div class="container mx-auto">
                    <div class="grid grid-cols-5 gap-8">
                        <div v-for="(nav, index) in footerNav" :key="index">
                            <h5 class="font-medium text-gray-700 mb-4">{{ nav.title }}</h5>
                            <ul class="space-y-2">
                                <li v-for="(item, idx) in nav.items" :key="idx">
                                    <a href="#" class="text-gray-500 hover:text-green-500 text-sm">{{ item }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        <script>
            const app = new Vue({
                el: '#app',
                data() {
                    return {
                        currentImageIndex: 0,
                        quantity: 1,
                        selectedSpec: '500g/份',
                        mainImage: 'https://ai-public.mastergo.com/ai/img_res/49016a5b24188e0e122676575b7eed9d.jpg',
                        thumbnails: [
                            'https://ai-public.mastergo.com/ai/img_res/86ba74b75a29eeed78dc275e51f4559f.jpg',
                            'https://ai-public.mastergo.com/ai/img_res/dcb13e11ef749cd223e38f3e5b249154.jpg',
                            'https://ai-public.mastergo.com/ai/img_res/ccc8e0da24ad94d1a63cb8bd249252e3.jpg',
                            'https://ai-public.mastergo.com/ai/img_res/1f825d6510be33420058124cc4aa89b4.jpg',
                            'https://ai-public.mastergo.com/ai/img_res/22f43d9ae2fcf26add66912190ffe2c4.jpg'
                        ],
                        detailImages: [
                            'https://ai-public.mastergo.com/ai/img_res/f7f70e451ea30245c94a9a6b2220d476.jpg',
                            'https://ai-public.mastergo.com/ai/img_res/d7194135a8615b1118be99d9b8fb5ef4.jpg',
                            'https://ai-public.mastergo.com/ai/img_res/b6292df84f3d9db8bf8e7b8ca799367f.jpg'
                        ],
                        swiperOption: {
                            loop: true,
                            autoplay: {
                                delay: 3000,
                                disableOnInteraction: false
                            },
                            pagination: {
                                el: '.swiper-pagination'
                            },
                            navigation: {
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev'
                            }
                        },
                        banners: [
                            'https://ai-public.mastergo.com/ai/img_res/701a8f0c4c59d3f3bffe3daa9b7be8b6.jpg',
                            'https://ai-public.mastergo.com/ai/img_res/1ce267f82a58fb37e48a971df47597c6.jpg',
                            'https://ai-public.mastergo.com/ai/img_res/5f5967e4205f9be2bed71594ca0ea3da.jpg'
                        ],
                        products: Array(12).fill().map((_, i) => ({
                            name: `有机生菜 ${i + 1}号 新鲜采摘 农场直供 无农药残留 500g/份`,
                            price: ((Math.random() * 20 + 10).toFixed(2)),
                            sold: Math.floor(Math.random() * 1000),
                            image: 'https://ai-public.mastergo.com/ai/img_res/118e91062327527419f97dfe841373d6.jpg'
                        })),
                        features: [{
                                icon: 'fas fa-box-open text-green-500',
                                title: '品类齐全',
                                desc: '轻松购物'
                            },
                            {
                                icon: 'fas fa-truck text-green-500',
                                title: '多仓直发',
                                desc: '极速配送'
                            },
                            {
                                icon: 'fas fa-medal text-green-500',
                                title: '正品行货',
                                desc: '精致服务'
                            },
                            {
                                icon: 'fas fa-tags text-green-500',
                                title: '天天低价',
                                desc: '畅选无忧'
                            }
                        ],
                        footerNav: [{
                                title: '购物指南',
                                items: ['购物流程', '会员介绍', '生鲜购物', '常见问题']
                            },
                            {
                                title: '配送方式',
                                items: ['上门自提', '配送服务', '配送费用', '配送范围']
                            },
                            {
                                title: '支付方式',
                                items: ['货到付款', '在线支付', '分期付款', '公司转账']
                            },
                            {
                                title: '售后服务',
                                items: ['售后政策', '退款说明', '退换货流程', '品质保证']
                            },
                            {
                                title: '特色服务',
                                items: ['生鲜专区', '企业采购', '礼品卡', '精选优惠']
                            }
                        ]
                    }
                }
            })
        </script>
</body>

</html>